<template>
  <sn-three-col-space>
    <div slot="spaceContent">
      <div class="status-box">
        <div v-if="true">
          <p class="el-icon-success" style="color: #40DD6F;font-size: 100px"></p>
          <p style="font-size: 40px;font-weight: 700;color: #26ce61" class="p1">已完成</p>
        </div>
        <div v-else>
          <p class="el-icon-error" style="color: #EF4238;font-size: 100px"></p>
          <p style="font-size: 40px;font-weight: 700;color: #EF4238" class="p1">待付款</p>
        </div>
      </div>
      <div class="note">
        <span  style=" color: #333;font-size: 20px">猫眼订单号:21425328981</span>
        <span style="float: right;color: #666;position: fixed;left: 1580px">（有订单问题可拨打猫眼客服电话<i style="color: #F76C6C">1010-5335</i>，工作时间: 9:00-24:00）</span>
      </div>
      <!--订单详情表单-->
      <div class="desc">
        <el-table
            :data="tableData"
            style="width: 100%">
          <el-table-column
              prop="film"
              label="影片"
              width="430">
          </el-table-column>
          <el-table-column
              prop="time"
              label="时间"
              width="430">
          </el-table-column>
          <el-table-column
              prop="cinema"
              label="影院"
              width="430">
          </el-table-column>
          <el-table-column
              prop="seat"
              label="座位"
              width="480">
          </el-table-column>
        </el-table>
      </div>
    <!--订单信息汇总-->
      <div class="Info">
         <!--信息-->
        <span>
          <div class="cinema-info">
          <p class="name" style="font-size: 22px;font-weight: 700;">影立方773IMAX影城（东郊记忆店）</p>
          <p class="address" style="font-size: 18px;">地址: 建设南支路4号东郊记忆（原东区音乐公园内）</p>
          <p class="phone" style="font-size: 18px;">电话: 028-84773773/84117773</p>
        </div>
        </span>
         <!--价格-->
        <span style="position: fixed;top: 700px; left: 1900px;">
          <div class="price-box">
          <span style="font-size: 20px">总价:</span>
          <span class="price" style="font-size: 46px;color: #f03d37;font-weight: 700;">159.6</span>
        </div>
        </span>
      </div>
    </div>
  </sn-three-col-space>

</template>

<script>
export default {
name: "OrderDetails",
  data(){
    return{
      tableData: [{
        film: '《中国机长》',
        time: '周五 10月4日 21:45',
        cinema: '影立方773IMAX影城（东郊记忆店）',
        seat:'B区 1号厅（影厅冠名招商中） \n' +
            '6排08座 6排05座 6排06座\n' +
            '6排07座'
      }]
    }
  }
}
</script>

<style scoped>
.p1{
  position:relative;
  left: 140px;
  top: -262px;
}
.el-icon-success{
  position:relative;
  left: 10px;
  top: -52px;
}
.el-icon-error{
  position:relative;
  left: 10px;
  top: -52px;
}
.status-box {
  height: 200px;
  background-color:#F4FFF8;
}
.note{
  height: 80px;
  position:fixed;
  top: 350px;
}
.desc{
  border:1px solid #E9E9EB;
  position:fixed;
  top: 400px;
}
.Info{
  position:fixed;
  top: 550px;
}
</style>
